<template>
	<div class="app-container">
		<div class="content">
			<div class="navnum">
				<el-steps :active="1" finish-status="end" process-status='curt' class="nextnav" simple>
					<el-step title="导入文件" icon="iconfont icon-1"></el-step>
					<el-step title="保单校验" icon="iconfont icon-2"></el-step>
					<el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
				<div class="list-tab">
		          <div class="tab now">下游保单结算</div>
		          <div class="tab" @click="gopidan">下游批单结算</div>
		           <div class="tab" @click="goedit">下游结算批改</div>
		   </div>
			</div>
			
			<!--form-->
			<el-form label-width="100px" class="upsettle-form1" :model="formData" :rules="rules" ref="formData">
				<div class="form_top">
					<!--出单时间范围-->
					<el-form-item label="结算周期：" class="is-required" prop="value">
						<div class="input_wp">
							<el-date-picker class="wd300" format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="formData.value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"  :picker-options="pickerOptions">
							</el-date-picker>
							<div style="display: none;">
								<el-input type="hidden" v-model="formData.value"></el-input>
							</div>
							<span class="timetips">  (按录入系统时间进行筛选)</span> 
						</div>
					</el-form-item>

					<!--组织部门-->
					<el-form-item label="业务归属：" class="" prop="orgs">

						<!-- <tree-select :open="true" :treeData="treeData" :treeProps="treeProps1" v-model="formData.organizationUnitId" :multiple="false" placeholder="请选择组织" style="
width: 300px;margin-bottom: 10px !important;" @setSelectedId="setSelectedId" node-key="id">
					</tree-select>   @change='setSelectedId'-->
						<ztree-select class="wd300 setB" multiple v-model="formData.organizationUnitId" :treedata="treeData" :childprops="childprops" :regchild="regchild"></ztree-select>
					</el-form-item>

					<!--业务员-->
					<!--<el-form-item label="业务归属：" class="" prop="salesman">
					<div class="input_wp">
						<el-select v-model="formData.salesman" placeholder="请选择" size="mini" class="wd300" @change="salesmanC(salesman)">
						    <el-option
						      v-for="item in roleList"
						      :key="item.organzationId"
						      :label="item.organzationName+'('+item.charger+')'"
						      :value="item.organzationId">
						    </el-option>
						 </el-select>
					</div>		           
		      	</el-form-item>
		      	-->
					<el-form-item label="保险公司：" class="" prop="insuranceId">
						<div class="input_wp">
							<el-select class="wd300" size="mini" v-model="formData.insuranceId" placeholder="请选择结算公司" @change="changeIns(formData.insuranceId)">
								<el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
									<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
									</el-option>
								</el-option-group>
							</el-select>
						</div>

					</el-form-item>

					<!--工号-->
					<!--<el-form-item label="工号：" class="" prop="staffId">
					<div class="input_wp">
					    <el-checkbox-group v-model="formData.staffId" size="mini" @change="staffIdC(staffId)">
					      <el-checkbox-button v-for="item in staffId" :label="item.staffAccount" :key="item.id" :value="item.id"></el-checkbox-button>
					    </el-checkbox-group>						 
					</div>		           
		      	</el-form-item>-->

					<el-form-item label="工号：" prop="staffId">
						<el-select class="wd300" v-model="formData.staffId" size="mini" placeholder="请选择适用工号">
							<el-option v-for="item in staffId" :key="item.id" :label="item.staffAccount" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<!--保单类型-->
					<div class="typeWp">
						<el-form-item label="保单类型：" class="is-required" prop="insuranceType">
							<div class="input_wp">
								<!--<el-checkbox-group v-model="formData.insuranceType" size="mini" @change="insuranceTypeC(formData.insuranceType)">
					      <el-checkbox-button v-for="item in insuranceType" :label="item.label" :key="item.value"></el-checkbox-button>
					    </el-checkbox-group>					 -->
								<el-checkbox-group v-model="formData.insuranceType" size="mini">
									<el-checkbox-button v-for="insuranceType in insuranceType" :label="insuranceType" :key="insuranceType">{{insuranceType}}</el-checkbox-button>
								</el-checkbox-group>
							</div>
						</el-form-item>
					</div>

				</div>

				<!--下一步-->
				<el-form-item class='btn-item'>
					<el-button type="primary" class="submitBtn" @click="toNext('formData')" size="small" :loading='isloading'>下一步</el-button>
				</el-form-item>

			</el-form>
		</div>
	</div>
</template>
	
<script>
import Vue from "vue";
import treeSelect from "@/components/tree-select/tree.vue";
import ztreeSelect from "@/components/z-select/index.vue";

export default {
  components: {
    treeSelect,
    ztreeSelect
  },
  data() {
    const insuranceTypes = ["商业", "交强"];
    return {
      //数组子级相关参数
      childprops: {
        name: "displayName", //显示名字
        children: "orgs", //子级字段名
        lv: "depth", //当前层级
        showChild: "createBusinessTeam" //当前层级是否展开
      },
      regchild: true,
      formData: {
        insuranceId: null,
        value: null,
        staffId: "",
        insuranceType: ["商业", "交强"],
        organizationUnitId: []
      },
      rules: {
        value: [
          {
            required: true,
            message: "请选择出单时间",
            trigger: "change"
          }
        ],
        insuranceType: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个保单类型",
            trigger: "change"
          }
        ]
      },
      role: "不限",
      isloading: false,
      units: null,
      options: [{ value: 1, label: "111" }],
      getDay: "",
      unitsprops: {
        value: "id",
        children: "organizationUnits",
        label: "displayName"
      },
      treeData: [],
      treeProps1: {
        label: "displayName",
        children: "orgs",
        level: "depth",
        value: "id"
      },
      staffList: null,
      roleList: [],
      salesman: null,
      staffId: null,
      insuranceId: null,
      insuranceType: insuranceTypes,
      companies:[],
        pickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              var num = day.getDay()-1;
              start.setTime(day.setDate(day.getDate() - num)); //本周第一天
              end.setTime(day.setDate(day.getDate() + 6));//本周最后一天
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              var num = day.getDay()-1+7;
              start.setTime(day.setDate(day.getDate() - num)); //上周第一天
              end.setTime(day.setDate(day.getDate() + 6));//上周最后一天
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              start.setTime(day.setDate(1));//本月第一天
              day.setMonth(day.getMonth()+1);//下个月
              end.setTime(day.setDate(day.getDate() - 1));//下个月第一天减1得到本月最后一天
              picker.$emit("pick", [start, end]);
            }
          },
           {
            text: "上月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              var day = new Date();
              day.setMonth(day.getMonth()-1)
              start.setTime(day.setDate(1));//上月第一天
              day.setMonth(day.getMonth()+1);//下个月
              end.setTime(day.setDate(day.getDate() - 1));//下个月第一天减1得到本月最后一天
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //快捷选项
    };
  },

  mounted() {
    this.getUnits();
    this.getCompanies();
    //	this.getDateChange()
    this.getUserList();
  },
  methods: {
  	gopidan(){
  		this.$router.push({
  			name:"downendorsement1"
  		})
  	},
  	goedit(){
				this.$router.push({
		  			name:"SettlementAmendment1"
		  		})
			},
    //组织机构
    getUnits() {
      let params = {
        queryType: 0
      };
      this.post(
        params,
        "services/app/common/GetCurrentOrganizationUnitsByType"
      ).then(rs => {
        console.log("组织机构" + rs);
        if (rs.success) {
          let data = rs.result;
          let arr = [];
          arr.push(data);
          this.treeData = arr;
          // console.log(rs.result);
          // console.log(this.treeData);
          // console.log('-----------');
        }
      });
    },

    //时间控件
    getDateChange() {
      var changeDate = new Date();
      var changeYear = changeDate.getFullYear();
      var changeMonth = changeDate.getMonth();
      var changeDay = changeDate.getDay();
      console.log(changeYear + "-" + changeMonth + "-" + changeDay);
      this.getDay = changeYear + "-" + changeMonth + "-" + changeDay;
    },
    //获取保险公司
    getCompanies() {
      const that = this;
      const params = {};
      this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
        console.log(rs);
        if (rs.success) {
          that.companies = rs.result.items;
        }
      });
    },
    //选择保险公司获取工号列表
    changeIns(val) {
      this.insuranceId = val;
      let params = {
        id: val
      };
      this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(
        rs => {
          console.log(rs);
          if (rs.success) {
            this.staffId = rs.result.items;
            for (var i = 0; i < this.staffId.length; i++) {
              if (this.staffId[i].describe != "") {
                this.staffId[i].staffAccount =
                  this.staffId[i].staffAccount +
                  " (" +
                  this.staffId[i].describe +
                  ")";
              } else {
                this.staffId[i].staffAccount = this.staffId[i].staffAccount;
              }
            }
            this.staffId.unshift({
              staffAccount: "不限"
            });
            console.log(this.staffId);
          }
        }
      );
    },
    //选择组织
    setSelectedId(val) {
      //   console.log(val);
      Vue.set(this.formData, "salesman", "");
      this.formData.organizationUnitId = val;

      let params = {
        organzationId: val
      };
      this.post(params, "services/app/common/CurrentBusinessAscription").then(
        rs => {
          if (rs.success) {
            let result = rs.result.items;
            this.roleList = result;
            // this.formData.salesman=rs.result.items[0].organzationId
          }
        }
      );
    },
    getUserList() {
      this.post({}, "services/app/common/CurrentBusinessAscription").then(
        rs => {
          if (rs.success) {
            let result = rs.result.items;
            this.roleList = result;
            //  this.formLabel.UserId=rs.result.items[0].organzationId
          }
        }
      );
    },

    //下一步
    toNext(formName) {
      //console.log(this.formData);
      let params = {};
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isloading = true;
          let startTime, endTime;
          startTime = this.formData.value[0];
          endTime = this.formData.value[1];
          //let insuranceTypeGo = this.formData.insuranceType;
          var insuranceTypeGo = "";
          var typess = "";
          this.formData.insuranceType.forEach(item => {
            if (item == "商业") {
              typess = 1;
            }
            if (item == "交强") {
              typess = 2;
            }
            insuranceTypeGo += typess + ",";
          });
          var insType =
            insuranceTypeGo.substring(insuranceTypeGo.length - 1) == ","
              ? insuranceTypeGo.substring(0, insuranceTypeGo.length - 1)
              : insuranceTypeGo;
          console.log(insType);
          let params = {
            signBeginDate: startTime,
            signEndDate: endTime,
            organizationUnitId: this.formData.organizationUnitId,
            salesman: this.formData.salesman,
            staffId: this.formData.staffId,
            insuranceType: insType,
            insuranceId: this.formData.insuranceId
          };

          this.post(params, "services/app/settle/GetCacheModelList").then(
            res => {
              let that = this;
              if (res.success) {
                //let id = res.result.batchId;
                let startTime, endTime;
                startTime = this.formData.value[0];
                endTime = this.formData.value[1];
                this.isloading = false;
                this.$router.push({
                  name: "financedown2",
                  query: {
                    id: res.result.batchId,
                    signBeginDate: startTime,
                    signEndDate: endTime,
                    organizationUnitId: this.formData.organizationUnitId,
                    salesman: this.formData.salesman,
                    staffId: this.formData.staffId,
                    insuranceType: insType,
                    insuranceId: this.formData.insuranceId
                  }
                });
              } else {
                const h = this.$createElement;
                this.isloading = false;
                this.$notify.error({
                  title: "错误",
                  message: res.error.message,
                  duration: 0,
                  customClass: "el-notification-error"
                });
              }
            }
          );
        }
      });

      console.log(params);
    }
  }
};
</script>

<style  lang="scss" scoped>
// .setB{margin-bottom:12px;}
.navnum {
  margin-top: 55px;
  padding: 0 20px;
  margin-bottom: 50px;
}
.el-steps--simple {
  padding: 17px 8%;
}
.el-form {
  .form_top {
    width: 550px;
    margin: 0 auto;
  }
  .input_wp {
    //margin-bottom: 12px;
    .fontsize12 {
      font-size: 12px;
    }
  }
  .modeP,
  .modeP_txt {
    display: inline-block;
  }
  .modeP_txt {
    margin-left: 106px;
    color: #cf1322;
    margin-top: -6px;
    margin-bottom: 0;
  }
  .wd300 {
    width: 300px;
  }
  .hei28 {
    height: 28px;
    line-height: 28px;
    padding: 0;
    margin: 0;
    color: #666;
    letter-spacing: 0;
    font-size: 12px;
    .acolor {
      color: #027dca;
    }
    .acolor:hover {
      text-decoration: underline;
    }
    .iconColor {
      color: #ff9430;
      cursor: pointer;
    }
  }
  .uploadTxt {
    display: inline-block;
    position: relative;
    top: -10px;
    margin-left: 20px;
    color: #666666;
    font-size: 13px;
  }
  .floatLeft {
    float: left;
    display: block;
  }
  .submitBtn {
    margin: 0 auto;
    margin-left: -100px;
  }
  .btn-item {
    margin-top: 100px;
    margin-bottom: 246px !important;
    text-align: center;
  }
  // .el-form-item{margin-bottom: 14px !important;}

  .typeWp {
    margin-top: 28px;
  }
}
.upsettle-form1 {
  padding-bottom: 100px;
}
.timetips{
	color: #666;
	font-size: 12px;
}
.list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
        margin-bottom:30px;
        margin-top:20px;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
// .form_top .el-form-item__error{margin-top: -10px !important;}
</style>
<style type="text/css">
.upsettle-form1 .el-form-item__label{color: #333333 !important;}
.el-step__head.is-curt,
.el-step__title.is-curt {
  color: #c0c4cc;
}
.upsettle-form1 .ats-tree .el-input__inner {
  width: 300px !important;
}
.upsettle-form1 .ats-tree .ats-tree-scrollbar {
  min-width: 300px;
}
</style>